<template>
  <view>
    <navbar top="80rpx"></navbar>
    <view class="container b-f">
      <!-- 顶部选项卡 -->
      <view class="swiper-tab dis-flex box-align-center flex-y-center">
        <template v-for="(item, index) in tabList" v-key="this">
          <view :class="'swiper-tab-item' + (dataType == item.value ? ' on' : '')" :data-current="item.value"
                @click="swichNav">{{ item.text }}</view>
        </template>
      </view>
      <!-- 提现明细列表 -->
      <scroll-view scroll-y bindscrolltolower="triggerDownLoad" :style="'height:' + swiperHeight + 'px;'">
        <view v-if="0 < list.data.length" class="widget-list">
          <view v-for="(item, index) in list.data" class="widget__detail dis-flex flex-x-between flex-y-center"
                :key="item.id">
            <view class="detail__left dis-flex flex-dir-column flex-x-around">
              <view class="detail__money f-30">提现 {{ item.money }}元</view>
              <view class="detail__time col-9 f-24">{{ item.create_time }}</view>
            </view>
            <view class="detail__right dis-flex flex-dir-column flex-x-center flex-y-center">
              <!-- 申请状态 (10待审核 20审核通过 30驳回 40已打款) -->
              <view :class="'detail__status f-28 col--' + item.apply_status">
                {{ applyStatus[item.apply_status] }}
              </view>
              <template v-if="30 == item.apply_status">
                <view class="detail__reason f-24" @click="triggerReasonMsg"
                      :data-reason="item.reject_reason">查看原因</view>
              </template>
            </view>
          </view>
        </view>
        <!-- 没有记录 -->
        <view v-if="!list.data.length && !isLoading" class="yoshop-notcont">
          <text class="iconfont icon-wushuju"></text>
          <text class="cont">暂无相关提现记录哦</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  const app = getApp();
  import navbar from "@/components/navbar/navbar";
	export default {
    components: {
      navbar
    },
		data() {
			return {
				applyStatus: [],
				isLoading: true,
				dataType: -1,
				page: 1,
				no_more: false,
        tabList:[],
        list: {
				  data: []
        }
			}
		},
		onLoad: function(options) {
			// 设置swiper的高度
			this.setSwiperHeight();
		},
		onShow: function() {
			// 获取提现明细列表
			this.getWithdrawList();
		},
		methods: {
			/**
			 * 获取提现明细列表
			 */
			getWithdrawList: function(isNextPage, page) {
				let _this = this;
				app._get('user.dealer.withdraw/lists', {
					status: _this.dataType,
					page: page || 1,
				}, function(result) {
					// 创建页面数据
					_this.setData(_this.createData(result.data, isNextPage));
				});
			},

			/**
			 * 创建页面数据
			 */
			createData: function(data, isNextPage) {
				data['isLoading'] = false;
				// 列表数据
				let dataList = this.list;
				if (isNextPage == true && (typeof dataList !== 'undefined')) {
					data.list.data = dataList.data.concat(data.list.data)
				}
				// 设置当前页面标题
				wx.setNavigationBarTitle({
					title: data.words.withdraw_list.title.value
				})
				// 导航栏数据
				data['tabList'] = [{
						value: -1,
						text: data.words.withdraw_list.words.all.value,
					}, {
						value: 10,
						text: data.words.withdraw_list.words.apply_10.value,
					}, {
						value: 20,
						text: data.words.withdraw_list.words.apply_20.value,
					},
					{
						value: 40,
						text: data.words.withdraw_list.words.apply_40.value,
					},
					{
						value: 30,
						text: data.words.withdraw_list.words.apply_30.value,
					}
				];
				// 审核状态
				data['applyStatus'] = {};
				data['tabList'].forEach(function(item) {
					data['applyStatus'][item.value] = item.text;
				});
				data['no_more'] = data.list.total <= data.list.data.length;
				return data;
			},
			/**
			 * 设置swiper的高度
			 */
			setSwiperHeight: function() {
				// 获取系统信息(拿到屏幕宽度)
				let systemInfo = wx.getSystemInfoSync(),
					rpx = systemInfo.windowWidth / 750, // 计算rpx
					tapHeight = Math.floor(rpx * 82), // tap高度
					swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
				this.setData({
					swiperHeight
				});
			},
			/** 
			 * 点击tab切换 
			 */
			swichNav: function(e) {
				let _this = this,
					current = e.target.dataset.current;
				if (_this.dataType == current) {
					return false;
				}
				_this.setData({
					dataType: current,
					list: {
					  data: []
          },
					page: 1,
					no_more: false,
					isLoading: true,
				}, function() {
					// 获取提现明细列表
					_this.getWithdrawList();
				});
			},
			/**
			 * 下拉到底加载数据
			 */
			triggerDownLoad: function() {
				// 已经是最后一页
				if (this.page >= this.list.last_page) {
					this.setData({
						no_more: true
					});
					return false;
				}
				// 获取提现明细列表
				this.getWithdrawList(true, ++this.page);
			},
			/**
			 * 查看驳回原因
			 */
			triggerReasonMsg: function(e) {
				wx.showModal({
					// title: this.applyStatus['30'] + '原因',
					title: '友情提示',
					content: e.currentTarget.dataset.reason,
					showCancel: false
				});
			},
		}
	}
</script>
<style lang="scss">
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>

	/* 选项卡 */
	.swiper-tab {
		width: 100%;
		text-align: center;
		height: 80rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.swiper-tab .swiper-tab-item {
		width: 33.333333%;
		height: 100%;
		font-size: 28rpx;
		color: #666;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 2px solid #ffffff00;
	}

	.swiper-tab .on {
    color: $uni-text-color-main;
		border-bottom: 2px solid $uni-border-color-main;
	}

	/* 设置scroll-view容器高度 */

	.widget-list,
	.yoshop-notcont {
		height: 100.1%;
	}

	/* 提现明细列表 */

	.widget-list {
		padding: 10rpx 20rpx 40rpx 20rpx;
		box-sizing: border-box;
	}

	.widget__detail {
		height: 170rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-bottom: 1rpx solid #ececec;
	}

	.widget__detail .detail__money {
		font-size: 30rpx;
		margin-bottom: 12rpx;
	}

	.widget__detail .detail__reason {
		margin-top: 15rpx;
		color: $uni-text-color-grey;
	}

	.col--10 {
		color: #fcc741;
	}

	.col--20,
	.col--40 {
		color: #96e0e1;
	}

	.col--30 {
		color: #f07b71;
	}
</style>
